
<template>
	<!-- #ifdef H5	 -->	
	<view 
		class="mix-refresh-content"
		:style="{
				transform: scroll?'none':'translateY('+ pageDeviation +'px)',
				transition: pageTransition + 's',
				
			}"
		@touchstart="pageTouchstart"
		@touchmove="pageTouchmove"
		@touchend="pageTouchend"
	>
	<!-- #endif -->
	<!-- #ifndef H5	 -->	
	<view 
		class="mix-refresh-content"
		:style="{
				transform: scroll?'none':'translateY('+ pageDeviation +'px)',
				transition: pageTransition + 's',
				
			}"
		@touchstart="pageTouchstart"
		@touchmove="pageTouchmove"
		@touchend="pageTouchend"
	>
	<!-- #endif -->
	
		<!-- 下拉刷新 -->
		<view class="mix-loading-wrapper">
			<text :style="{'color':color}">{{refreshText}}</text>
		</view>
		
		<slot></slot>
		
	</view>
</template>

<script>
	let startY, moveY;
	export default {
		props: {
			top: {
				//距离顶部距离，单位upx
				type: Number,
				default: 0
			},
			scroll:{
				type:Boolean,
				default:false
			},
			color:{
				type:String,
				default:"#666D83"
			}
		},
		data() {
			return {
				pageDeviation: 0, //下偏移量
				pageTransition: 0, //回弹过渡时间
				refreshReady: false, //进入刷新准备状态
				refreshing: false, // 进入刷新状态
				refreshText:"下拉刷新",
			};
		},
		computed: {
			pageTop(){
				// return uni.upx2px(this.top);
				return this.top;
			},
		},
		created(){
		},
		methods: {
			pageTouchstart(e){
				this.pageTransition = 0;
				startY = e.touches[0].pageY;
			},
			pageTouchmove(e){
				moveY = (e.touches[0].pageY - startY) * 0.4;
				if(moveY >= 0){
					this.pageDeviation = moveY;
					
					this.$emit('setEnableScroll', false);
				}
				if(moveY >= 50 && this.refreshReady === false){
					this.refreshReady = true;
					this.refreshText="释放刷新"
				}else if(moveY < 50 && this.refreshReady === true){
					this.refreshReady = false;
					this.refreshText="下拉刷新"
				}
			},
			pageTouchend(){
			
				this.pageTransition = 0.3;
				
				if(moveY >= 50){
					this.startPulldownRefresh();
				}else{
					this.pageDeviation = 0;
				}
				
				if(this.refreshReady === true){
					this.refreshReady = false;
				}
				
				startY = moveY = 0;
			},
			//开启下拉刷新
			startPulldownRefresh(){
				this.refreshing = true;
				this.refreshText="正在加载"
				this.pageDeviation = uni.upx2px(90);
				this.$emit('refresh');
			},
			//结束下拉刷新
			endPulldownRefresh(){
				setTimeout(()=>{
					this.refreshing = false;
					this.refreshText="下拉刷新"
					this.pageDeviation = uni.upx2px(0);
				},300)
				this.$emit('setEnableScroll', true);
			},
		},
		watch:{
			scroll(newValue,oldValue){
				if(newValue){
					this.scroll=newValue
				}
			}
		}
	}
</script>

<style>
	.mix-refresh-content{
		display: flex;
		flex-direction: column;
		position: relative;
	}
	/* 下拉刷新部分 */
	.mix-loading-wrapper{
		position: absolute;
		left: 0;
		top: 0;
		transform: translateY(-100%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50px;
	}
	.mix-loading-wrapper text{line-height: 50px;color: #666D83;}
	.mix-loading-icon{
		width: 50px;
		height: 50px;
		transition: .3s;
	}
	.mix-loading-icon.ready{
		transform: scaleX(1.3);
	}
	.mix-loading-icon.active{
		animation: loading .5s ease-in infinite both alternate;
	}
	
	@keyframes loading {
		0% {
			transform: translateY(-20upx) scaleX(1);
		}
		100% {
			transform: translateY(4upx)  scaleX(1.3);
		}
	}
	
</style>
